<template>
	<tm-fullView>
		<tm-menubars title="宫格排序" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<view class="shadow-24 ma-32 round-4 overflow " :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-5' : 'white'">
			<view class="text-size-s text-weight-b ma-32">长按开始拖动排序（开发工具有延迟，真机正常）</view>
			<tm-dragGrid @change="changall" :disabled.sync="disabledGrid" :list="list"></tm-dragGrid>
			<view class="pa-32">
				<tm-button theme="bg-gradient-green-accent" block @click="disabledGrid=!disabledGrid" >开始/关闭编辑拖动</tm-button>
			</view>
		</view>
		<view class="shadow-24 ma-32 round-4 overflow pa-32 " :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-5' : 'white'">
			<view class="text-size-s text-weight-b ma-32">插槽</view>
			<tm-dragGrid :itemHeight="120" :disabled="disabledGrid" :list="list">
				<template v-slot:default="{item}">
					<view style="width:90%;height:100rpx">
						<view :class="['bg-gradient-'+item.color+'-accent']" class=" flex-center  round-4 text-size-s fulled-height" >
							{{item.text}}
						</view>
					</view>
				</template>
			</tm-dragGrid>
			<view class="py-32">
				<tm-button theme="bg-gradient-primary-accent" block @click="disabledGrid=!disabledGrid" >开始/关闭编辑拖动</tm-button>
			</view>
		</view>
	</tm-fullView>
</template>

<script>
	import tmDragGrid from '@/tm-vuetify/components/tm-dragGrid/tm-dragGrid.vue';
	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
	import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
	import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
	import tmBadges from '@/tm-vuetify/components/tm-badges/tm-badges.vue';
	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
	export default {
		components: {
			tmDragGrid,
			tmMenubars,
			tmFullView,
			tmButton,
			tmIcons,
			tmBadges,
			tmTags
		},
		data() {
			return {
				disabledGrid:true,
				list:[
					{icon:'icon-QQ',text:'QQ',color:'primary',dot:true,dotIcon:'icon-minus'},
					{icon:'icon-aliwangwang',text:'阿里旺旺',iconSize:40,color:'blue',dot:true,dotIcon:'icon-check'},
					{icon:'icon-QQ',text:'QQ',iconSize:40,color:'primary',dot:true,dotIcon:'icon-check'},
					{icon:'icon-pengyouquan',text:'朋友圈',iconSize:40,color:'green',dot:true,dotIcon:'icon-check'},
					{icon:'icon-QQ',text:'QQ',iconSize:40,color:'primary',dot:true,dotIcon:'icon-check'},
					{icon:'icon-pengyouquan',text:'朋友圈',iconSize:40,color:'green',dot:true,dotIcon:'icon-check'},
					{icon:'icon-aliwangwang',text:'阿里旺旺',iconSize:40,color:'blue',dot:true,dotIcon:'icon-check'},
					{icon:'icon-QQ',text:'QQ',iconSize:40,color:'primary',dot:true,dotIcon:'icon-check'},
					{icon:'icon-pengyouquan',text:'朋友圈',iconSize:40,color:'green',dot:true,dotIcon:'icon-check'},
					{icon:'icon-QQ',text:'QQ',iconSize:40,color:'primary',dot:true,dotIcon:'icon-check'},
					{icon:'icon-pengyouquan',text:'朋友圈',color:'green',fontColor:'green',dot:true,dotIcon:'icon-clock'},
					{icon:'icon-aliwangwang',text:'阿里旺旺',color:'blue',dot:true,dotIcon:'icon-redo'},
				],
			};
		},
		methods: {
			changall(e){
				console.log(e);
			}
		},
	};
</script>

<style lang="scss">

</style>
